<template>
	<view style="background-color: #ededed;padding: 10px;height: 100vh;">

		<!-- 订单解析页面 -->
		<view class="">
			<view class="" v-for="(v,k) in parentJson"
				style="border-radius: 15px;padding: 10px;background-color: white;margin-bottom: 10px;">
				<view class="" style="display: flex;width: 100%;align-items: center;">
					<p style="line-height: 1;">消费方:</p>
					<input type="text" v-model="v.obj.name" style="padding: 5px;flex-grow: 1;">
				</view>
				<view class="" style="display: flex;width: 100%;align-items: center;">
					<p style="line-height: 1;">消费金额:</p>
					<input type="digit" v-model="v.obj.price" style="padding: 5px;flex-grow: 1;">
				</view>
				<view class="" style="display: flex;width: 100%;align-items: center;">
					<p style="line-height: 1;">消费状态:</p>
					<input type="text" v-model="v.obj.status" style="padding: 5px;flex-grow: 1;">
				</view>
				<view class="" style="display: flex;width: 100%;align-items: center;">
					<p style="line-height: 1;">消费类型:</p>
					<input type="text" v-model="v.obj.type" style="padding: 5px;flex-grow: 1;">
				</view>
				<view class="" style="display: flex;width: 100%;align-items: center;">
					<p style="line-height: 1;">备注:</p>
					<input type="text" v-model="v.obj.remark" style="padding: 5px;flex-grow: 1;">
				</view>
				<view class="" style="display: flex;width: 100%;align-items: center;">
					<p style="line-height: 1;">消费时间:</p>
					<input type="text" v-model="v.obj.time" style="padding: 5px;flex-grow: 1;">
				</view>
				<view class="" style="display: flex;width: 100%;align-items: center;">
					<p style="line-height: 1;">订单号:</p>
					<input type="text" v-model="v.obj.orderCode" style="padding: 5px;flex-grow: 1;">
				</view>
				<view class="" class="imgsContainerStyle">
					<img @click="delImg(v,k1)" v-for="(v1,k1) in v.obj.pic" :key="k1" :src="v1.src" alt=""
						style="width: 100%;height: 100%;object-fit: cover;">
					<view @click="selectImg(v)" class="" v-if=" v.obj.pic.length<2"
						style="width: 100%;height: 100%;object-fit: cover;display: flex;justify-content: center;align-items: center;border: 1px solid gainsboro;font-size: 15px;color: gainsboro;">
						点击上传截图
					</view>
				</view>
				<button style="width: 85%;background-color: #3998d8;color: white;"
					@click="submitOrder()">提交账单记录</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				parentJson: {}
			}
		},
		methods: {
			parmParser(obj) {
				let o = null
				let reg = /^\d{n}$/
				for (let words of obj.allWords) {
					if (words === "当前状态") {
						let i = obj.allWords.indexOf(words)
						o = {
							'name': obj.allWords[i - 2],
							'price': Math.abs(obj.allWords[i - 1]),
							'pic': []
						}
						o['status'] = obj.allWords[i + 1]
					}
					if (words === "收款方备注") {
						let i = obj.allWords.indexOf(words)
						o['remark'] = obj.allWords[i + 1]
					}
					if (words === "支付方式") {
						let i = obj.allWords.indexOf(words)
						o['type'] = obj.allWords[i + 1]
					}
					if (words === "转账时间") {
						let i = obj.allWords.indexOf(words)
						o['time'] = obj.allWords[i + 1]
					}
					if (words === "转账单号") {
						let i = obj.allWords.indexOf(words)
						o['orderCode'] = obj.allWords[i + 1]
					}
				}
				obj.obj = o
				return o
			},
			selectImg(v) {
				let that = this
				uni.chooseImage({
					count: 2, // 设置上传图片数量
					sizeType: ['original', 'compressed'], // ['original', 'compressed']可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // ['album', 'camera'] album 从相册选图，camera 使用相机，默认二者都有
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths
						if ((v.obj.pic.length + tempFilePaths.length) > 2) {
							uni.showModal({
								title: '警告',
								content: '已经超过单次可上传图片的最大上限',
								icon: 'error',
								showCancel: false,
								confirmText: "好的"
							})
						}
						if (!tempFilePaths) {
							uni.showToast({
								title: "选择图片为空",
								icon: 'error'
							})
							return false
						}
						for (let t of tempFilePaths) {
							uni.compressImage({
								src: t,
								quality: 10, //图片压缩质量，0～100，默认80，仅对jpg有效
								success: (res) => {
									let splitStr = res.tempFilePath.split(".")[0]
									splitStr = splitStr.slice(splitStr.length - 32, splitStr
										.length)
									v.obj.pic.push({
										name: splitStr,
										src: res.tempFilePath,
										baseImg: that.toBase64(res.tempFilePath)
									})
									that.$forceUpdate()
								},
								fail(err) {
									console.log('压缩失败==>', err);
								}
							})
						}
					},
					fail() {
						uni.showToast({
							title: "操作失败",
							icon: 'error'
						})
						return false
					}
				})
				console.log(this.parentJson);
			},
			toBase64(imgPath) {
				const fs = uni.getFileSystemManager()
				try {
					const res = fs.readFileSync(imgPath, 'base64')
					return res
				} catch (e) {
					console.error(e)
					return ''
				}
			},
			delImg(v, k) {
				let that = this
				uni.showModal({
					title: "提示",
					content: '是否要删除这个图片',
					success(res) {
						if (res.confirm) v.obj.pic.splice(k, 1)
						that.$forceUpdate()
						return false
					}
				})
			},
			submitOrder() {
				let that = this
				uniCloud.callFunction({
					name: 'submitOrder',
					data: {
						body: that.parentJson,
						userid: uni.getStorageSync("userObj")._id,
						name: uni.getStorageSync("userObj").nickName
					},
					success({
						result: e
					}) {
						console.log(e);
						if (e.code == 0) {
							uni.reLaunch({
								url: '/pages/orderList/orderList',
								success() {
									uni.showModal({
										title: "提示",
										content: e.message
									})
								}
							})
							return false
						}
						return uni.showToast({
							title: e.message,
							icon: 'error'
						})
					}
				})
			}
		},
		onLoad(options) {
			this.parentJson = JSON.parse(decodeURIComponent(options.parm))
			for (let oneObj of this.parentJson) {
				console.log(oneObj);
				let allWords = []
				for (let lineWords of oneObj.parse) {
					allWords.push(lineWords.words[0].content)
				}
				oneObj.allWords = allWords
				this.parmParser(oneObj)
			}
		}
	}
</script>

<style>
	.imgsContainerStyle {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
		grid-template-rows: repeat(1, minmax(30vw, 1fr));
		gap: 10px;
		max-width: 90vw;
		margin: 0 auto;
	}
</style>